import { Button } from "@mui/material";
import ArrowRightIcon from "@mui/icons-material/ArrowRight";
import React, { useEffect, useState } from "react";
import bg from "@/assets/images/home/xiaolang.png";
import "./home.less";
import { getHomeDataApi } from "@/api";
import SubjectItem from "./components/SubjectItem";
import { useNavigate } from "react-router-dom";

export default function Home() {
  const nav = useNavigate();
  // 准备好 首页的数据
  const [state, setState] = useState<IHomeData>();
  // 发请求一定要放到 useEffect
  useEffect(() => {
    getHomeDataApi().then((res) => {
      if (res.errCode === 0) {
        setState(res.data);
      }
    });
  }, []);
  return (
    <div className="home">
      <section className="top">
        <h2>{state?.exam.title}</h2>
        <Button security="text" onClick={() => nav("/subjects")}>
          <span>切换考试科目</span>
          <ArrowRightIcon />
        </Button>
      </section>
      <section className="welcome">
        <div className="wel">欢迎Tomato来到XX学习库！</div>
        <div className="flex">
          <div className="pic">
            <img src={bg} alt="" />
          </div>
          <div className="grid">
            <ul>
              <li>已学{state?.study}题</li>
              <li>共{state?.exam.itemCount}题</li>
            </ul>
            <ul>
              <li>
                <p className="count">{state?.wrong}</p>
                <p className="text">错题</p>
              </li>
              <li>
                <p className="count">{state?.collect}</p>
                <p className="text">收藏</p>
              </li>
            </ul>
          </div>
        </div>
      </section>

      <section className="subjects">
        {state?.exemItems.map((item) => (
          <SubjectItem key={item.id} data={item} />
        ))}
      </section>
    </div>
  );
}
